<template>
  <!-- 创建时间：2023/4/15 -->
  <!-- 作者：admin -->
  <!-- ExplorePageHeader组件说明：发现页头部标签 -->
    <div class="explore-find-header">
        <!--显示的标签部分-->
        <div class="explore-header-tags" @click="showList">
            <div v-for="item in tags"
                 :key="item.id"
                 :data-level="item.level"
                 v-if="item.isShow"
                 :class="{'active-with-bg':item.isCheck}">{{ item.name }}
            </div>
            <div :data-level="-1">···</div>
        </div>
        <!-- 未显示的标签部分-->
        <div class="explore-header-others" v-show="isShowOtherTagsPanel">
            <div v-for="item in categories" :key="item.id" class="others-item">
                <div class="others-title">{{ item.name }}</div>
                <div class="others-tags">
                    <div class="tags"
                         v-for="tag in tags"
                         v-if="tag.level > 0 && String(tag.category)=== item.category"
                         :key="tag.id"
                         @click="addShowList(Number(tag.level))">
                        <span :class="{'active-without-bg':tag.isShow}">
                            {{ tag.name }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {orderArrayByAttr} from "@/http/tools";
import {nanoid} from "nanoid";
import {LINKTOALL} from "@/http/constant";

export default {
    name: "ExplorePageHeader",
    props: ['curLevel'],
    data() {
        return {
            tags: [],
            categories: [],
            isShowOtherTagsPanel: false
        }
    },
    methods: {
        // 跳转到其他页面
        linkToOther(level) {
            // 先重置其他所有的标签为未选中，然后将当前标签设置为选中
            this.tags = this.tags.map(item => {
                return {
                    ...item,
                    isCheck: Number(level) === item.level
                }
            })
            // 更新列表
            this.$bus.$emit(LINKTOALL, {
                level: this.tags[Number(level)].level,
                name: this.tags[Number(level)].name
            })
        },
        // 标签的点击事件
        showList(e) {
            const {level} = e.target.dataset
            if (Number(level) === -1) {
                this.isShowOtherTagsPanel = !this.isShowOtherTagsPanel
            } else {
                this.linkToOther(level)
            }
        },
        // 将点击的标签添加到显示的标签页中
        addShowList(level) {
            const {isShow} = this.tags[level]
            this.$set(this.tags, level, {
                ...this.tags[level],
                isShow: !isShow
            })
        }
    },
    watch: {
        // 监听标签列表的变化
        '$store.getters.curCandidateList': {
            immediate: true,
            deep: true,
            handler(newVal) {
                const {single, sameUrl} = newVal
                if (sameUrl) {
                    const {order, url} = sameUrl
                    const sameUrlArr = sameUrl.list.map(item => {
                        let isShow = false
                        let isCheck = false
                        if (item.level < 5) {
                            isShow = true
                        }
                        if (item.level === 0) {
                            isCheck = true
                        }
                        return {
                            id: nanoid(),
                            ...item,
                            order,
                            url,
                            isShow,
                            isCheck
                        }
                    })
                    this.tags = [...orderArrayByAttr([...single, ...sameUrlArr], 'level')]
                }
            }
        },
        '$store.state.categories': {
            immediate: true,
            deep: true,
            handler(newVal) {
                if (newVal) {
                    const tmp = []
                    for (const key in newVal) {
                        const cat = {
                            id: nanoid(),
                            category: key,
                            name: newVal[key],
                        }
                        tmp.push(cat)
                    }
                    this.categories = [...tmp]
                }
            }
        },
        curLevel: {
            immediate: true,
            handler(newVal) {
                this.tags = this.tags.map(item => {
                    if (item.level.toString() === newVal.toString()) {
                        return {
                            ...item,
                            isCheck: true
                        }
                    } else {
                        return {
                            ...item,
                            isCheck: false
                        }
                    }
                })
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.explore-find-header {
  //禁止用户双击选择页面文字
  user-select: none;
  //选择标签部分
  .explore-header-tags {
    display: flex;
    justify-content: flex-start;
    //多行的时候要换行
    flex-wrap: wrap;
    font-size: .65vw;
    font-weight: 700;

    > div:not(:last-child) {
      margin-right: .6vw;
    }

    > div {
      padding: 0.5vw;
      background-color: @mouseHover;
      opacity: .7;
      margin-bottom: .5vw;
      border-radius: .5vw;
      text-align: center;
      cursor: pointer;
      transition: all .1s ease;
    }

    > div:hover {
      background-color: @bgColor;
      color: @mainColor;
    }

    .active-with-bg {
      background-color: @bgColor;
      color: @mainColor;
    }
  }

  //其他标签部分
  .explore-header-others {
    background-color: @mouseHover;
    padding: .7vw .7vw 0 .7vw;
    border-radius: .5vw;
    opacity: .7;

    .others-item {
      display: flex;
      margin-bottom: 1vw;

      .others-title {
        font-size: 1vw;
        font-weight: bold;
        width: 3vw;
        text-align: center;
      }

      .others-tags {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        align-content: flex-start;
        padding-top: .15vw;
        margin-left: 1vw;
        font-size: .65vw;

        .tags {
          width: 5vw;
          margin-bottom: 1vw;

          > span {
            padding: .3vw .5vw;
            border-radius: .3vw;
            cursor: pointer;

            &:hover {
              background-color: @bgColor;
              color: @mainColor;
            }
          }

          .active-without-bg {
            color: @mainColor;
          }
        }
      }
    }
  }
}
</style>